<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="button" value="测试ajax状态变化-完整过程" onclick="sendAjax1()">
    <input type="button" value="测试ajax状态变化" onclick="sendAjax2()">
    <input type="button" value="测试ajax应用层错误" onclick="sendAjax3()">
    <script>
        /*  ajax状态监控：
            XMLHttpRequest构建的对象进行请求发送时,包含多种状态变化和结果。
            XMLHttpRequest请求状态
                onreadystatechange 当 readyState 属性发生变化时，调用该属性的回调函数（无法监控状态 0 ）    
                xhr.readyState 可以获取当前ajax所处的状态返回一个XMLHttpRequest对象的状态数字，代表请求的状态码。
                0:用于异步请求的XMLHttpRequest对象构建完成(new 实例对象)
                1:调用了XMLHttpRequest对象的初始化设置方法(open方法的调用)
                2:调用了XMLHttpRequest对象的发送方法(send方法的调用，请求响应过程正常)
                3:对响应数据进行分析，且解析正常
                4:ajax完成请求逻辑-响应结束 (a、正常结果、b、异常结果)
                
        */

        function sendAjax1(){
            let xhr=new XMLHttpRequest();
            console.log(xhr.readyState);//0实例构建完成
            xhr.open("get","/user");
            console.log(xhr.readyState);//1 实例完成初始化配置

            //状态2,3,4是通过onreadystatechange进行加载读取（将onreadystatechange放在new XMLHttpRequest后面监控1,2,3,4几个状态）
            xhr.onreadystatechange=function(){
                console.log(xhr.readyState);//2、3、4
            };
            xhr.send();
        }
        function sendAjax2(){
            let readyStateCode=null;
            let xhr=new XMLHttpRequest();
            console.log("实例构建完成");
            readyStateCode=0;
            xhr.onreadystatechange=function(){//1 2 3 4  xhr.readyState=1   xhr.readyState=4
                
                if(xhr.readyState==4 && readyStateCode!=3){
                    console.log("网络错误");
                }else if(xhr.readyState==4 && readyStateCode==3){
                    console.log("请求成功-onload");
                }else{
                    readyStateCode=xhr.readyState;//readyStateCode=1   
                }


            };
            xhr.open("get","/user");
            xhr.send();
        }



        
      /*   
            异常2：应用层逻辑异常=>ajax过程是正常的，但响应结果是异常的(http响应码异常)
            ajax状态正常从0~4未出现异常，但服务器返回的http状态码告知，服务队请求的处理无法完成--应用层错误
            xhr.statusText返回一个文本信息，其中包含http服务器返回的响应状态文本
            xhr.status返回一个请求响应状态数字，代表请求的响应状态 
        
        */
        function sendAjax3(){
            let readyStateCode=null;
            let xhr=new XMLHttpRequest();
            console.log(xhr);
            console.log("实例构建完成");
            readyStateCode=0;
            xhr.onreadystatechange=function(){//1 2 3 4  xhr.readyState=1   xhr.readyState=4
                
                if(xhr.readyState==4 && readyStateCode!=3){
                    console.log("网络错误");
                }else if(xhr.readyState==4 && readyStateCode==3){
                    if(xhr.status>=200 && xhr.status<300){
                        console.log("请求成功，应用层响应正常:",xhr.statusText,xhr.responseText);
                    }else if(xhr.status>=400 && xhr.status<500){
                        console.log("请求成功，服务器对该资源操作受限(资源不存在)",xhr.statusText);
                    }else if(xhr.status>=500 && xhr.status<600){
                        console.log("请求成功，服务器内部执行代码错误",xhr.statusText);
                    }else{
                        console.log("请求成功,但不支持ajax");
                    }
                }else{
                    readyStateCode=xhr.readyState;//readyStateCode=1   
                }


            };
            xhr.open("get","/serviceError");
            xhr.send();
        }
  


    </script>
       
          
        
        
       


    
</body>
</html>